<template>
  <div id="app" class="min-h-screen bg-gray-900">
    <nav class="bg-gray-800 border-b border-gray-700">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex items-center">
            <router-link to="/" class="text-xl font-bold text-primary-400">
              影流播放器
            </router-link>
          </div>
          
          <div class="flex items-center space-x-4">
            <router-link to="/" class="text-gray-300 hover:text-white px-3 py-2 rounded-md">
              首页
            </router-link>
            <router-link to="/player" class="text-gray-300 hover:text-white px-3 py-2 rounded-md">
              播放器
            </router-link>
            <router-link to="/batch" class="text-gray-300 hover:text-white px-3 py-2 rounded-md">
              批量播放
            </router-link>
            <router-link to="/history" class="text-gray-300 hover:text-white px-3 py-2 rounded-md">
              历史记录
            </router-link>
          </div>
        </div>
      </div>
    </nav>

    <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
      <router-view />
    </main>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useMediaStore } from './stores/media'

const mediaStore = useMediaStore()

onMounted(() => {
  // 初始化媒体数据
  mediaStore.init()
})
</script>
